<template>
  <div class="w-full h-full" :style="computedStyle">
    <div id="page-screen-index2-container" class="w-full h-full" v-loading="loading" style="min-width:1180px;min-height:715px;">
      <div id="page-screen-index2" class="page-screen-index2 flex flex-col h-full" v-if="info && !loading">
        <!-- <div :style="isScreen ? 'height: 330px' : 'height: 584px;'"> -->
          <el-row :gutter="20" class="h-full">
            <el-col :span="7" class="relative flex flex-col h-full">
              <div :style="isScreen ? 'height: 330px' : 'height: 60vh;'" class="flex flex-col">
                <div :style="{'height': isScreen ? 'auto' : '17rem'}">
                  <div class="common-card flex flex-col" :class="isScreen ? 'p-2' : 'py-4 pt-3 px-2'">
                    <div class="flex items-center pr-4">
                      <img class="common-card-icon" src="../../../assets/screen/icon@2x(7).png" style="width:4rem;height:3rem;object-fit:contain;" />
                      <span class="common-card-title" style="font-size: 1rem;">用能概况</span>
                    </div>
                    <div v-for="(i, index) in dsInfo" :key="index" class="flex items-center" :class="{'mt-2': index !== 0}">
                      <div class="flex flex-col center px-2">
                        <img v-if="i.type == 1" src="../../../assets/screen/icon-tunder.png" class="object-contain" :class="isScreen ? 'w-4 h-4' : 'w-10 h-10'" />
                        <img v-else-if="i.type == 2" src="../../../assets/screen/icon-water.png" class="object-contain" :class="isScreen ? 'w-4 h-4' : 'w-10 h-10'" />
                        <div class="text-white text-center" :style="{'font-size': isScreen ? '10px' : '1rem'}">{{ i.type == 1 ? '电' : '水' }}</div>
                      </div>
                      <div class="transparent-card-v3 flex flex-1 items-center" :class="isScreen ? 'mx-1 py-1' : 'mx-2 px-2 py-3'">
                        <div class="flex-1 p-1 flex flex-col text-center" :style="{'font-size': isScreen ? '10px' : '1rem'}">
                          <div style="color:#45e6fa;">
                            <span :style="{'font-size': isScreen ? '12px' : '1.4rem'}">{{ i.month }}</span>
                            <!-- {{ i.unit }} -->
                          </div>
                          <span class="text-white mr-1 text-sm">本月（ {{i.unit }}）</span>
                          <!-- <div style="color: #80a7c0;" :style="{'font-size': isScreen ? '8px' : '14px'}">
                            <span class="mr-1">同比：{{ i.month_tongbi }}</span>
                            <span>环比：{{ i.month_huanbi }}</span>
                          </div> -->
                        </div>
                      </div>
                      <div class="transparent-card-v3 flex flex-1 items-center" :class="isScreen ? 'mx-1 py-2' : 'mx-1 px-2 py-3'">
                        <div class="flex-1 p-1 flex flex-col text-center" :style="{'font-size': isScreen ? '10px' : '1rem'}">
                          <div style="color:#45e6fa;">
                            <span :style="{'font-size': isScreen ? '12px' : '1.4rem'}">{{ i.year }}</span>
                            <!-- {{ i.unit }} -->
                          </div>
                          <span class="text-white mr-1 text-sm">本年（{{ i.unit }}）</span>
                          <!-- <div style="color: #80a7c0;" :style="{'font-size': isScreen ? '8px' : '14px'}">
                            <span>环比：{{ i.year_huanbi }}</span>
                          </div> -->
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="flex-1 h-0 flex flex-col">
                  <div class="common-card h-full flex-1 flex flex-col" style="padding-bottom: 4px;">
                    <div class="flex items-center pt-3 px-3">
                      <div class="flex items-center flex-1">
                        <img class="common-card-icon" src="../../../assets/screen/icon@2x(7).png" style="width:4rem;height:3rem;object-fit:contain;"  />
                        <span class="common-card-title" style="font-size: 1rem;">本月用电排行</span>
                      </div>
                      <div v-if="computedCapsuleConfig.data.length !== capsuleConfig.data.length" style="color: #AADDFF;" class="cursor-pointer opacity-50 hover:opacity-70" @click="$router.push('/energyAnalysis/energyRanking')">更多</div>
                    </div>
                    <div class="px-1 pr-20 flex-1 h-0" id="yong_dian_pai_hang">
                      <dv-capsule-chart :config="computedCapsuleConfig" />
                    </div>
                  </div>
                </div>
              </div>

              <div class="common-card py-1 flex-1 flex flex-col" style="padding-bottom: 10px;">
                <div class="flex items-center pr-4 pt-4">
                  <img class="common-card-icon" src="../../../assets/screen/icon@2x(7).png" style="width:4rem;height:3rem;object-fit:contain;"  />
                  <span class="common-card-title" style="font-size: 1rem;">碳排放总量</span>
                </div>
                <div class="flex-1 flex flex-col justify-center">
                  <div class="flex items-center">
                    <div class="flex-1 flex items-center justify-center">
                      <img src="../../../assets/screen/co2.png" class="w-16 h-16" />
                    </div>
                    <div class="flex-1 text-center">
                      <div style="color: #80a7c0;" :style="{'font-size': isScreen ? '10px' : '0.875rem'}">运行阶段碳排放</div>
                      <div style="color: #fff;" :style="{'font-size': isScreen ? '16px' : '1.4rem'}" class="py-1">{{co2Value}}</div>
                      <div style="color: #80a7c0;" :style="{'font-size': isScreen ? '10px' : '0.875rem'}">千克二氧化碳</div>
                    </div>
                  </div>
                  <div class="flex items-center" :class="isScreen ? 'py-1' : 'my-3'">
                    <div class="flex-1 text-center">
                      <div style="color: #80a7c0;" :style="{'font-size': isScreen ? '10px' : '0.875rem'}">单位面积碳排放</div>
                      <div style="color: #fff;" :style="{'font-size': isScreen ? '16px' : '1.4rem'}" class="py-1">{{perAreaco2Value}}</div>
                      <div style="color: #80a7c0;" :style="{'font-size': isScreen ? '10px' : '0.875rem'}">千克二氧化碳/(平方米·年)</div>
                    </div>
                    <div class="flex-1 text-center">
                      <div style="color: #80a7c0;" :style="{'font-size': isScreen ? '10px' : '0.875rem'}">人均碳排放</div>
                      <div style="color: #fff;" :style="{'font-size': isScreen ? '16px' : '1.4rem'}" class="py-1">{{perPersonco2Value}}</div>
                      <div style="color: #80a7c0;" :style="{'font-size': isScreen ? '10px' : '0.875rem'}">千克二氧化碳/(人·年)</div>
                    </div>
                  </div>
                </div>
              </div>
            </el-col>
            <el-col :span="10" class="relative flex flex-col h-full">
              <div :style="isScreen ? 'height: 330px' : 'height: 60vh;'" class="w-full">
                <div class="w-full h-full relative">
                  <img src="../../../assets/screen/WechatIMG88.jpg" class="absolute top-0 right-0 bottom-0 left-0 rounded-lg w-full h-full object-cover" :draggable="false" />
                </div>
              </div>

              <div class="flex-1 mt-2 h-0">
                <div class="h-full rounded-xl" id="energy_compare" style="background-color: rgba(0,0,0,.2);"></div>
              </div>
            </el-col>
            <el-col :span="7" class="relative flex flex-col h-full">
              <div :style="isScreen ? 'height: 330px' : 'height: 60vh;'" class="flex flex-col">
                <div class="common-card">
                  <div class="flex items-center pt-2">
                    <img class="common-card-icon" src="../../../assets/screen/icon@2x(7).png" style="width:4rem;height:3rem;object-fit:contain;"  />
                    <span class="common-card-title" style="font-size: 1rem;">设备状态</span>
                  </div>
                  <div class="flex px-4">
                    <div class="flex-1 text-center transparent-card-v3" :class="isScreen ? 'py-2' : 'py-4'">
                      <div style="color:#58DBFF;" :style="isScreen ? 'font-size:20px;' : 'font-size:1.4rem;'">{{info.device.equi_online}}/{{info.device.equi_total}}</div>
                      <div class="text-white" :class="isScreen ? 'text-xs' : 'text-sm'">采集网关</div>
                    </div>
                    <div class="flex-1 text-center transparent-card-v3 ml-2" :class="isScreen ? 'py-2' : 'py-4'">
                      <div style="color:#58DBFF;" :style="isScreen ? 'font-size:20px;' : 'font-size:1.4rem;'">{{info.device.meter_online}}/{{info.device.meter_total}}</div>
                      <div class="text-white" :class="isScreen ? 'text-xs' : 'text-sm'">设备总数</div>
                    </div>
                  </div>
                </div>

                <div class="common-card mt-3 relative flex-1 h-0 flex flex-col" style="padding-bottom: 0;">
                  <div class="flex items-center" :class="isScreen ? 'pt-3' : 'pt-2 pr-4'">
                    <img class="common-card-icon" src="../../../assets/screen/icon@2x(1).png" style="width:4rem;height:3rem;object-fit:contain;"  />
                    <span class="common-card-title" style="font-size: 1rem;">用电分析</span>
                    <span style="flex:1;"></span>
                    <el-radio-group v-model="item_type" size="mini" :style="isScreen ? 'transform:scale3d(.7,.7,.7);white-space: nowrap;' : ''">
                      <el-radio-button label="1">年</el-radio-button>
                      <el-radio-button label="2">月</el-radio-button>
                      <el-radio-button label="3">日</el-radio-button>
                    </el-radio-group>
                  </div>
                  <div id="yong_dian_fen_xi_chart" class="flex-1"></div>
                  <!-- <div class="absolute text-white text-sm top-16 right-6">
                    <div class="text-sm">{{ info.items[item_type].item_detail[pieDataIndex].name }}</div>
                    <div>用量：{{ info.items[item_type].item_detail[pieDataIndex].yongliang }}</div>
                    <div>同比：{{ info.items[item_type].item_detail[pieDataIndex].tongbi }}</div>
                    <div>环比：{{ info.items[item_type].item_detail[pieDataIndex].huangbi }}</div>
                  </div> -->
                </div>
              </div>

              <dv-border-box-8 :dur="6" :class="isScreen ? 'p-2' : 'p-4 mt-2'" class="h-0 flex-1 flex flex-col">
                <dv-decoration-7 :style="isScreen ? 'height:20px;transform:scale3d(.8,.8,.8)' : 'height:30px;'">
                  <div class="theme-front-color px-2">告警信息</div>
                </dv-decoration-7>
                <div :class="isScreen ? 'mt-2' : 'mt-4'" class="flex-1">
                  <dv-scroll-board :config="meterWarning" class="h-full" style="height:200px" />
                </div>
              </dv-border-box-8>
            </el-col>
          </el-row>
      </div>
    </div>

    <el-dialog
      title="温湿度"
      width="600px"
      border
      :visible.sync="wsModal"
      :append-to-body="true">
      <el-table :data="wsList">
        <el-table-column label="仪表编号" prop="code" align="center" width="100"/>
        <el-table-column label="仪表名称" prop="name" align="center" width="100"/>
        <el-table-column label="最新温度(℃)" prop="wendu" align="center" width="100"/>
        <el-table-column label="最新湿度(%)" prop="shidu" align="center" width="100"/>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import debounce from 'debounce'
import myGauge from './components/my-gauge'
import myGauge2 from './components/my-gauge2'
import * as echarts from 'echarts'
import Charts from '@jiaminghi/charts'
import dataV from '@jiaminghi/data-view'
import Vue from 'vue'
import * as Util from "@/utils";
Vue.use(dataV)

let pieChart = null

export default {
  data() {
    return {
      loading: true,
      co2Value: 0 ,
      perAreaco2Value: 0 ,
      perPersonco2Value: 0 ,
      building:'',
      pageZoomRate: 1,
      info: null,
      meterWarning: {
        header: ['回路名称', '报警详情', '报警等级', '异常发生时间'],
        columnWidth: [100, 80, 80, 150],
        speed: 2000,
        data: []
      },
      item_type: 1,
      pieDataIndex: 0,
      gdc: [
        {
          name: 'PUE等级',
          cop: 12.5,
          component: 'my-gauge'
        },
        {
          name: '碳排放等级',
          cop: 37.5,
          component: 'my-gauge2'
        }
      ],
      hjjc: [
        {
          name: '温度',
          value: 30,
          unit: '℃'
        },
        {
          name: '湿度',
          value: 57,
          unit: '%'
        },
        {
          name: 'PM2.5',
          value: 34.3,
          unit: 'μg/m³'
        },
        {
          name: '余压',
          value: 52,
          unit: 'Pa'
        }
      ],
      wsModal: false,
      wsList: [
        {
          code: 'T201037',
          name: '温湿度',
          wendu: 20.5,
          shidu: 57.5
        }
      ],
      dsInfo: [
        {
          type: 1,
          month: '',
          unit: 'kWh',
          month_tongbi: '0',
          month_huanbi: '0%',
          year: '',
          year_huanbi: ''
        },
        {
          type: 2,
          month: '',
          unit: 'm³',
          month_tongbi: '',
          month_huanbi: '',
          year:'',
          year_huanbi: ''
        }
      ],
      capsuleConfig: {
        data: [
          // {
          //   name: '一厂A1',
          //   value: 3568.25
          // },
          // {
          //   name: '二厂C1',
          //   value: 3251.23
          // },
          // {
          //   name: '三厂B1',
          //   value: 2646.58
          // },
          // {
          //   name: '一厂A2',
          //   value: 2465.89
          // },
          // {
          //   name: '二厂A2',
          //   value: 2015.56
          // }
        ],
        // unit: 'kwh',
        colors: ['#37a2da', '#32c5e9', '#67e0e3', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293'],
        showValue: true
      },
      maxLine: 4,
    }
  },
  computed: {
    computedStyle() {
      return this.$route.name === 'screenV2' ? {
        'background-color': '#233a6a',
        'padding': '5px',
      } : {
        // 'zoom': this.pageZoomRate
      }
    },
    isScreen() {
      return this.$route.name === 'screenV2'
    },
    computedCapsuleConfig() {
      let computedCapsuleConfig = JSON.parse(JSON.stringify(this.capsuleConfig))
      computedCapsuleConfig.data = computedCapsuleConfig.data.filter((_, index) => index < this.maxLine)
      return computedCapsuleConfig
    },
  },
  components: {
    myGauge,
    myGauge2
  },
  created() {
    window.onresize = () => {
      this.domResize()
    }
    this.domResize()
    this.getInfo()
    this.getBuildDeviceList()
  },
  watch: {
    item_type() {
      this.drawPie()
    },
  },
  mounted() {
    window.onresize = debounce(() => {
      this.loading = true
      setTimeout(() => {
        this.loading = false
        this.drawPie()
        this.drawBar()
        this.calcLines()
      }, 500)
    }, 800)
  },
  methods: {
    getBuildDeviceList(){
      this.$api.okhttp({
        url: this.$http.adornUrl("/ecs/ecsbuildinginfo/select"),
        method: "get",
        params: this.$http.adornParams({
          customerId: this.$util.cookies.get("customer_id"),
          projectid:this.$util.cookies.get("cuuren_projectId")
        })
      }).then((data) => {
        if (data && data.code === 0) {
          if(data.menuList.length>0){
            let currentbuildInfo = data.menuList[0];
         //   this.building = currentbuildInfo.buildingId
            this.building = data.menuList.map(i=>i.buildingId)
            //查电
            this.getleftinfo('010000')
            //查水
            this.getleftinfo('020000')

            let allKey = []
            data.menuList.forEach(it=>allKey.push(it.buildingId))
            //查排行
            this.$api.okhttp({
              url:this.$http.adornUrl('/eas/energyRanking/list'),
              method: "post",
              data: this.$http.adornParams(
                {
                  buildingIds: allKey,
                  dateRange: [Util.dateFormat('YYYY-mm-01',new Date()),Util.dateFormat('YYYY-mm-dd',new Date())],
                  meterType: '010000',
                 // dashboard: true,
                  customerId: this.$util.cookies.get("customer_id"),
                  projectId:this.$util.cookies.get("cuuren_projectId")
                }
              )
            }).then((data) => {
              if (data && data.code === 0) {
               let values = data.data;
               let dataarray = []
                for(let i = 0;i<values.length;i++){
                  if(values[i].addValue != '--') {
                    dataarray.push({'name': values[i].bName, 'value': values[i].addValue});
                  }else{
                    dataarray.push({'name': values[i].bName, 'value': 0});
                  }
                }
                this.capsuleConfig = {
                    data: dataarray,
                    // unit: 'kwh',
                    colors: ['#37a2da', '#32c5e9', '#67e0e3', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293'],
                    showValue: true
                }
                this.calcLines()
              }
            })

            //查碳排
            this.$api.okhttp({
              url:this.$http.adornUrl('/co2/analysis/list'),
              method: "post",
              data: this.$http.adornParams(
                {
                  buildingIds: [currentbuildInfo.buildingId],
                  date: Util.dateFormat('YYYYmmdd',new Date()),
                  dateType: '3',
                  customerId: this.$util.cookies.get("customer_id"),
                  projectId:this.$util.cookies.get("cuuren_projectId")
                }
              )
            }).then((data) => {
              if (data && data.code === 0) {
                let meterdataList = data.data;
                let total = 0
                meterdataList.forEach(it=>total=total+it.value)
                this.co2Value = total.toFixed(2)

                if(currentbuildInfo.buildingArea && currentbuildInfo.buildingArea!==''){
                  this.perAreaco2Value = (total/currentbuildInfo.buildingArea).toFixed(2)
                }
                if(currentbuildInfo.buildingPersons && currentbuildInfo.buildingPersons!==''){
                  this.perPersonco2Value = (total/currentbuildInfo.buildingPersons).toFixed(2)
                }
              }
            })

          }
        } else {
        }
      });

    },

    getleftinfo(energyType) {
      this.$api.okhttp({
        url:this.$http.adornUrl('/eas/energyUse/list'),
        method: "post",
        data: this.$http.adornParams(
          {
            buildingIds: this.building,
            meterType: energyType,
            customerId: this.$util.cookies.get("customer_id"),
            dashboard: true,
            projectId:this.$util.cookies.get("cuuren_projectId")
          }
        )
      }).then((data) => {
        if (data && data.code === 0) {
          let dataVal = data;
          if (energyType == '010000') {
            this.dsInfo[0].month = dataVal.currentMonthValue
            this.dsInfo[0].month_huanbi = dataVal.monthIncRate

            this.dsInfo[0].year = dataVal.currentYearValue
            this.dsInfo[0].year_huanbi = dataVal.yearIncRate
          }else{
            this.dsInfo[1].month = dataVal.currentMonthValue
            this.dsInfo[1].month_huanbi = dataVal.monthIncRate

            this.dsInfo[1].year = dataVal.currentYearValue
            this.dsInfo[1].year_huanbi = dataVal.yearIncRate
          }
        }
      }).catch(()=>{
      })
    },
    getInfo() {
      this.$api.getHomeIndexInfo({
        'projectId': this.$util.cookies.get("cuuren_projectId"),
        "customerId":this.$util.cookies.get('customer_id')
      }).then(res => {
        // console.log(res)
        if (res.code === 0) {
          this.loading = false
          this.info = res.data
          // this.meterWarning.data = this.info.alarms.map(item => {
          //   return [
          //     // item.alarm_pname,
          //     item.alarm_lname,
          //     item.alarm_notes,
          //     item.alarm_leval_desc,
          //     // item.alarm_event_desc,
          //     item.alarm_event_time
          //   ]
          // })

          this.meterWarning.data = this.info.alarms.map(item => {
            return [
              // item.alarm_pname,
              item.meterName,
              item.quotaName,
              '警告',
              // item.alarm_event_desc,
              item.createTime
            ]
          })



          this.drawPie()
          this.drawBar()
          this.calcLines()
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    calcLines() {
      this.$nextTick(() => {
        const dom = document.querySelector('#yong_dian_pai_hang')
        if (!dom) return
        const domHeight = dom.offsetHeight
        const maxLine = parseInt(domHeight / 30) - 1
        console.log(domHeight, maxLine)
        this.maxLine = maxLine
      })
    },
    drawBar() {
      const eng = this.info.eng
      this.$nextTick(() => {
        const chart = echarts.init(document.querySelector('#energy_compare'))
        chart.setOption({
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow',
              label: {
                show: true
              }
            }
          },
          calculable: true,
          legend: {
            data: ['昨日碳排放', '碳排放'],
            itemGap: 5,
            textStyle: {
              color: '#fff'
            }
          },
          grid: {
            top: this.isScreen ? '20%' : '15%',
            left: '2%',
            right: '5%',
            bottom: '5%',
            containLabel: true
          },
          axisLabel: {
            color: '#fff'
          },
          xAxis: [
            {
              type: 'category',
              data: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23],
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: 'kgCO2e',
              nameTextStyle: {
                color: '#fff'
              }
            }
          ],
          series: [
            {
              name: '昨日碳排放',
              type: 'bar',
              data: eng.yesday.map(Number)
            },
            {
              name: '碳排放',
              type: 'bar',
              data: eng.today.map(Number)
            }
          ]
        })
      })
    },
    drawPie() {
      const data = this.info.items[this.item_type].item_detail
      this.$nextTick(() => {
        if (pieChart) {
          pieChart.clear()
        }
        pieChart = echarts.init(document.querySelector('#yong_dian_fen_xi_chart'))
        pieChart.setOption({
          tooltip: {
            trigger: 'item',
          },
          legend: {
            type: 'scroll',
            orient: 'vertical',
            right: this.isScreen ? '5%' : '8%',
            top: '15%',
            itemWidth: 14,
            itemHeight: 8,
            textStyle: {
              color: '#fff',
              fontSize: this.isScreen ? 10 : 12
            },
            formatter: function(name) {
              return name + '：' + data.find(i => i.name === name).yongliang
            }
          },
          series: [
            {
              type: 'pie',
              data: data.map(i => {
                return {
                  name: i.name,
                  value: Number(i.yongliang)
                }
              }),
              itemStyle: {
                borderRadius: 5,
                borderColor: 'transparent',
                borderWidth: 2
              },
              center: ['35%', '50%'],
              radius: this.isScreen ? ['50%', '66%'] : ['40%', '66%'],
              insideLabel: {
                show: true,
              },
              outsideLabel: {
                show: false,
                labelLineEndLength: 3,
                fontSize: this.isScreen ? 12 : 15
              },
              label: {
                position: 'center',
                show: true,
                fontSize: this.isScreen ? 13 : 16,
                color: '#fff',
                formatter: function () {
                  return data.map(i => Number(i.yongliang)).reduce((x, y) => x + y).toFixed(2) + 'kW·h'
                }
              },
            }
          ]
        })

        // 监听 mouseover 事件
        pieChart.on('mouseover', (params) => {
          if (params.componentType === 'series') {
            this.pieDataIndex = params.dataIndex
          }
        })
      })
    },
    domResize() {
      this.$nextTick(() => {
        const dom = document.querySelector('#page-screen-index2-container')
        const x = dom.offsetWidth / 1600
        // console.log(dom.offsetWidth, dom.offsetHeight)
        // if (x * 1000 < dom.offsetHeight) {
        //   this.pageZoomRate = x
        //   return
        // }
        this.pageZoomRate = dom.offsetHeight / 1000 > 1 ? 1 : dom.offsetHeight / 1000
      })
    },
  }
}
</script>


<style lang="scss">
  .page-screen-index2 {
    // aspect-ratio: 1400 / 950;

    .dv-scroll-board {

      .header {
        font-size: 14px;
      }

      .row-item {
        font-size: 12px;
      }
    }

   .common-card-image {
     background-image: url(../../../assets/screen/box-bg@2x-2.png);
     background-size: 100% 100%;
     padding: 20px;
   }

   .common-card {
     background-image: url(../../../assets/screen/panel-bg@2x.png);
     background-size: 100% 100%;
     padding-bottom: 20px;

     &-icon {
       width: 70px;
       height: 62px;
       margin-left: -5px;
     }

     &-title {
       color: #AADDFF;
       font-size: 21px;
       margin-left: -10px;
     }
   }

   .transparent-card {
     background-image: url(../../../assets/screen/icon-333.png);
     background-size: 100% 100%;
   }

   .transparent-card-v2 {
     background-image: url(../../../assets/screen/box-bg@2x.png);
     background-size: 100% 100%;
   }

   .transparent-card-v3 {
     background-image: url(../../../assets/screen/box-bg@2x-1.png);
     background-size: 100% 100%;
   }

   .transparent-card-v4 {
     background-image: url(../../../assets/screen/box-bg@2x-2.png);
     background-size: 100% 100%;
   }
  }

  @media screen and (max-width: 900px) {
    .common-card {
      padding-bottom: 10px !important;

      &-icon {
        width: 35px !important;
        height: 31px !important;
        margin-left: 0 !important;
      }

      &-title {
        font-size: 14px !important;
        margin-left: -5px !important;
      }
    }

    .dv-scroll-board {

      .header {
        font-size: 10px !important;

        .header-item {
          padding: 2px !important;
          height: 25px !important;
          line-height: 25px !important;
        }
      }

      .row-item {
        font-size: 10px !important;

        .ceil {
          padding: 2px !important;
        }
      }
    }

    
  }

  .dv-capsule-chart {
    // padding: 0;

    .label-column div {
      // margin: 5px 0;
      height: 28px;
      line-height: 28px;
      font-size: 14px;
    }

    .capsule-item {
      // padding: 10px;
      // margin: 10px 0;

      // .capsule-item-column {
      //   margin: 0 !important;
      // }
    }

    .label-column {
      // font-size: 8px;
    }

    .unit-label {
      font-size: 14px;
    }

    .capsule-item-value {
      font-size: 14px !important;
      padding-left: 5px;
    }


  }

  

  @media (max-width: 1900px) {
    html {
      font-size: 22px; /* 在大屏上适当放大 */
    }
  }

  html {
    font-size: 16px; /* 基准值 */
  }
</style>
